<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>天地图</title>
		<link rel="stylesheet" type="text/css" href="../css/common.css"></link>
    </head>
    <body> 
        <!--地图容器-->
		<div id="mapDiv" style="height: 450px;margin: 2%;"></div>
		
		<div class="content" align="center">
			<a class="button" href="javascript:void(0)" id="button1">绘制点</a>
			<a class="button" href="javascript:void(0)" id="button2">绘制线</a>
			<a class="button" href="javascript:void(0)" id="button3">绘制矩形</a>
			<a class="button" href="javascript:void(0)" id="button4">绘制多边形</a>
			<a class="button" href="javascript:void(0)" id="button5">测距</a>
			<a class="button" href="javascript:void(0)" id="button6">测面</a>
			<a class="button" href="javascript:void(0)" id="button7">绘制圆形</a>
			<a class="button" href="javascript:void(0)" id="button8">获取图层个数</a>
        </div>
		
		<div class="content" align="center">
			<a class="button" href="javascript:void(0)" id="button9">点击事件</a>
        </div>
		
        
    </body>
	<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="../layer/layer.js"></script>
    <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=e83d04f3e04272b8d9e91615e309fe36"></script>
    <script type="text/javascript">
        var map;
        var zoom = 12;
        $(document).ready(function (){
            map = new T.Map('mapDiv');
            map.centerAndZoom(new T.LngLat(116.40769, 39.89945), zoom);
        });
        
        //绘制标注(点)
        $("#button1").click(function (){
            var markerTool = new T.MarkTool(map, {follow: true});
            map.clearOverLays();
            markerTool.open();
			
            markerTool.addEventListener("mouseup",function (e){
				var points = e.currentLnglat;
				layer.alert("标注点的坐标=" + JSON.stringify(points));
			});
        });
        
        //绘制线
        $("#button2").click(function (){
			layer.tips('在地图中单击多次', '#button2');
            var PolylineTool = new T.PolylineTool(map);
            map.clearOverLays();
            PolylineTool.open();
			
            PolylineTool.addEventListener("draw",function (e){
				layer.msg("用户当前绘制的折线的点坐标数组" + JSON.stringify(e.currentLnglats) + "<br/>" + 
						  "用户当前绘制的折线的地理长度:" + JSON.stringify(e.currentDistance));
			});
        });
        
        
        //绘制矩形
        $("#button3").click(function (){
			layer.tips('在地图中长按鼠标左键并拖动', '#button3');
            var rectTool = new T.RectangleTool(map);
            map.clearOverLays();
            rectTool.open();
            
            rectTool.addEventListener("draw",function (e){
				layer.msg("用户当前绘制的矩形的点坐标数组" + JSON.stringify(e.currentBounds));
			});
        });
        
        
        //绘制多边形
        $("#button4").click(function (){
			layer.tips('在地图中单击多次', '#button4');
            var PolygonTool = new T.PolygonTool(map, {
	                strokeColor: "blue", //折线颜色 
	                fillColor: "#FFFFFF", //填充颜色。当参数为空时，折线覆盖物将没有填充效果 
	                strokeWeight: "3px", //折线的宽度，以像素为单位 
	                strokeOpacity: 0.5, //折线的透明度，取值范围0 - 1 
	                fillOpacity: 0.5			//填充的透明度，取值范围0 - 1 
            	}
			);
            map.clearOverLays();
            PolygonTool.open();
			PolygonTool.setTips("双击结束,右键移动");

            PolygonTool.addEventListener("draw",function (e){
				layer.msg("用户当前绘制的多边形的点坐标数组" + JSON.stringify(e.currentLnglats) + "<br/>" + 
						  "用户最后绘制的多边形的地理面积:" + e.currentArea);
			});
        });
       
        
        
        //测距
        $("#button5").click(function (){
            var config = {
                showLabel: true
            };
            lineTool = new T.PolylineTool(map, config);
            lineTool.open();
            
            lineTool.addEventListener("addpoint",function (e){
				layer.msg("用户当前绘制的折线的点坐标数组" + JSON.stringify(e.currentLnglats) + "<br/>" + 
						  "用户当前绘制的折线的地理长度:" + e.currentDistance);
			});
        });
        
        //测面
        $("#button6").click(function (){
            var config = {
                showLabel: true,
                color: "blue", weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5
            };
            //创建标注工具对象
            polygonTool = new T.PolygonTool(map, config);
            polygonTool.open();
            
            polygonTool.addEventListener("draw",function (e){
				layer.msg("用户最后绘制的多边形的地理面积:" + e.currentArea);
			});
			
			polygonTool.addEventListener("addpoint",function (e){
				layer.msg("用户绘制的多边形的顶点坐标数组" + JSON.stringify(e.currentLnglats));
			});
        });
        
        
        //绘制圆形
        $("#button7").click(function (){
			layer.tips('在地图中长按鼠标左键并拖动', '#button7');
            var config = {
                color: "blue",
                weight: 3,
                opacity: 0.5,
                fillColor: "#FFFFFF", 
                fillOpacity: 0.5
            }
            var circleTool = new T.CircleTool(map,config);
            circleTool.open();
			
            circleTool.addEventListener("drawend", function (e){
				var radius = e.currentRadius;
				console.log(e.currentCenter);
				layer.msg("中心点坐标" + JSON.stringify(e.currentCenter) + "<br/>半径:"+radius + "(米)<br/>面积:"+Math.PI * radius*radius + "(米)");
			});
        });
        
        
        //获取图层个数
        $("#button8").click(function (){
            var len = map.getOverlays().length;
            layer.msg("图层个数:"+len);
        });
        
    </script>
</html>